import React, { Component } from 'react'
import { StatusBar, BackHandler, Linking, TouchableOpacity, ActivityIndicator, ScrollView, Text, Image, View } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

import ShortcutList from '../Components/ShortcutList'
import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain

import { connect } from 'react-redux'
import UserActions from '../Redux/UserRedux'

// Styles
import styles from './Styles/UserScreenStyle'

class UserScreen extends Component {
  static navigationOptions = {
    header: null,
    tabBarLabel: '我的',
    tabBarIcon: ({tintColor}) =>
      <Icon name='user' color={tintColor} size={24} />
  }
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', ()=>{
      StatusBar.setTranslucent(true)
      StatusBar.setBarStyle('light-content')
      StatusBar.setBackgroundColor('transparent')
    })
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    this._navListener.remove()
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  render () {
    if (this.props.user.fetching) {
      return <ActivityIndicator />
    }
    if (!this.props.user.payload) {
      return null
    }
    const { navigate } = this.props.navigation
    const user = this.props.user.payload
    const dataList = [
      {color:'#FEC606',title:'分享有礼',icon:'gift', event:()=>navigate('PromotionScreen')},
      {color:'#63393E',title:'我的二维码',icon:'qrcode',event:()=>navigate('WebScreen',{title:'我的二维码',link:`${domain}/api/member/qrcode?token=${user.token}`})},
      {color:'#8870FF',title:'我的钱包',icon:'money', event:()=>navigate('WalletScreen',{token:user.token})},
      {color:'#F29B34',title:'现金红包',icon:'ticket', event:()=>navigate('WebScreen',{title:'现金红包',link:domain+'/api/coupon/lists?token='+user.token})},
      {color:'#FD5B03',title:'常约师傅',icon:'heart', event:()=>navigate('WebScreen',{title:'常约师傅',link:domain+'/index.php/api/member/history_master?token='+user.token})},
      {color:'#E75926',title:'代理登录',icon:'user-o',event:()=>navigate('WebScreen', {title:'代理登录', link:domain+'/agent/login/login'})},
      {color:'#71BA51',title:'客服电话',icon:'headphones',event:()=>
       Linking.openURL('tel:4000092234')},
      {color:'#1DABB8',title: '意见反馈',icon: 'bug',event:()=>navigate('WebScreen',{title:'意见反馈',link:domain+'/api/discuss/idea.html?token='+user.token})},
    ]
    return (
      <ScrollView style={styles.container}>
        <TouchableOpacity
          onPress={()=>navigate('UserInfoScreen')}
          style={styles.header}>
          <Image
            style={styles.avatar}
            source={{uri:user.head_img}} />
          <Text style={styles.username}>
            {user.nickname}</Text>
        </TouchableOpacity>
        <ShortcutList data={dataList} />
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    //getUser: (token) => dispatch(UserActions.userRequest(token))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(UserScreen)
